<template>
  <div class="addhe100">
    <!-- <ul class="tabTitList">
      <li
        v-for="(item, index) in tabTitList"
        :key="index"
        :class="{ activeTab: selectNum == index }"
        class="tabTit"
        @click="changeDig(index)"
      >{{ item }}</li>
    </ul> -->

    <!-- 负责人类型 -->
    <div class="tab">
      <span class="tabTit " style="cursor:auto"></span>
      <span v-for="(item, index) in tabTitList" :key="index"
        :class="{ activeTab: selectNum == item.ind, tab: !taboneflg }" class="tabTit" @click="changeDig(item.ind)">
        {{ item.titName }}
      </span>
      <span class="tabTit " style="cursor:auto"></span>
    </div>
    <!-- 列表数据 -->
    <div class="m-t-10 listTables resslistcont">
      <!-- <el-table height="646px" -->
      <el-table v-loading="loading" :data="SendPersonData.data" class="flagTable rainLimitTable" style="width: 100%">
        <template slot="empty" style="height: 95% !important">
          <img src="@/assets/dialog/NoDataicon.png" alt="">
        </template>
        <el-table-column align="center" prop="序号" width="100" label="序号">
          <template slot-scope="scope">
            <!-- {{ scope.$index + 1 }} -->
            <span>{{(Pageipage - 1) * Pageirows + scope.$index + 1}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" align="center" width="200" label="姓名" />
        <el-table-column prop="post" align="center" min-width="300" label="单位及职务" />
        <el-table-column prop="phone" align="center" min-width="300" label="办公室电话及手机" />
      </el-table>
      <div class="page-wrap">
        <el-pagination background prev-text="上一页" next-text="下一页" :page-sizes="pageInfo.sizeList"
          :current-page="Pageipage" :page-size="Pageirows" :total="SendPersonData.dataCount"
          layout="total, sizes, prev, pager, next" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>
      <!-- <div class="page-wrap">
        <el-pagination
          background
          :page-sizes="pageInfo.sizeList"
          :current-page="Pageipage"
          :page-size="Pageirows"
          :total="SendPersonData.dataCount"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div> -->
    </div>
  </div>
</template>

<script>
import MixinPage from '@/views/components/MixinPage'
import {
  GetSendPerson, GetSendPersonPage
} from '@/api/zyx.js'
export default {
    components: {},
    mixins: [MixinPage],
    data() {
        return {
            parameter: {},
            tabTitList: ['区县责任人', '乡镇责任人', '村级责任人'],
            tabTitList: [
              { 'titName': '区县责任人', ind: 0, 'showflg': true },
              { 'titName': '乡镇责任人', ind: 1, 'showflg': true },  
              { 'titName': '村级责任人', ind: 2, 'showflg': true }  
            ],
            
            selectNum: 0,
            taboneflg: true,
            SendPersonData: [],
            Pageipage: 1,
            Pageirows: 10,
            loading: false
        }
    },
    created() {
        this.parameter = this.$store.getters.dlgParams.params
    },
    mounted() {
        this.GetSendPersonData()
    },
    methods: {
        changeDig(index) {
            this.selectNum = index
            this.Pageipage = 1
            this.GetSendPersonData()
        },
        GetSendPersonData() {
            this.loading = true;
            // this.SendPersonData = [];
            const params = {
                addvcd: this.parameter.Ewcode,
                level: this.selectNum + 1,
                page: this.Pageipage,
                limit: this.Pageirows
            }
            // GetSendPerson(params).then((res) => {
              GetSendPersonPage(params).then((res) => {
                if (res.isSuccess) {
                    this.SendPersonData = res
                }
                this.loading = false
            }).catch(err=>{
              this.loading = false
            })
        },
        /** 显示条数*/
        handleSizeChange(val) {
            this.Pageipage = 1
            this.Pageirows = val
            this.GetSendPersonData()
        },
        /** 翻页*/
        handleCurrentChange(val) {
          this.Pageipage = val
          if(val== null){
            this.Pageipage = 1
          }
          this.loading = true;
            const params = {
                addvcd: this.parameter.Ewcode,
                level: this.selectNum + 1,
                page: this.Pageipage,
                limit: this.Pageirows
            }
            
              GetSendPersonPage(params).then((res) => {
                if (res.isSuccess) {
                    this.SendPersonData = res
                }
                this.loading = false
            }).catch(err=>{
              this.loading = false
            })
        },
    }
}
</script>

<style lang="less" scoped>
.resslistcont /deep/ .el-table tbody tr {
  background: rgba(0, 150, 255, 0.3);
  font-size: 14px;
}

/*行间隙*/
/deep/ .el-table__body {
  -webkit-border-vertical-spacing: 7px; // 垂直间距
}

.addhe100 {
  //height:100%;
  height: 640px;
}

.tabTitList {
  line-height: 34px;
  display: flex;

  //.tabTit {
  //	width: 120px;
  //	text-align: center;
  //	border: 1px solid #75b0fc;
  //  cursor: pointer;
  //  margin-right:5px;
  //}

  //.activeTab {
  //	background: url(../../assets/newimg/tabBg.png) no-repeat;
  //	background-size: 100% 100%;
  //	background-position: bottom center;
  //}
}

.el-table /deep/thead {
  background: rgba(0, 150, 255, 0.3);
  color: #fff;

  th {
    .cell {
      color: #00FEFE;
    }
  }
}

.el-table /deep/ .el-table__body-wrapper {
  height: calc(100% - 42px);
}

.resslistcont {
  height: calc(100% - 42px);
  padding-bottom: 20px;
}

.flagTable {
  height: calc(100% - 10px);
  //min-height:400px;
  //max-height:60vh;
  //max-height:60vh;
  overflow: auto;

}

.tab {
  justify-content: center;
  margin: 10px auto;
  text-align: center;
}

.tab .tabTit {
  padding: 0;
  width: 33%;
  font-size: 14px;
}

.tab .tabwid50 {
  width: 50%;
}

.activeTab {
  background: url(../../assets/imgNew/tabact.png) no-repeat;
  background-size: 6% 17%;
  background-position: bottom center;
}
</style>
